<template>
  <div class="temp-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <el-form-item label="用户姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="card">
        <el-input v-model="ruleForm.card"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="cellphone">
        <el-input v-model="ruleForm.cellphone"></el-input>
      </el-form-item>
      <!-- <br><br>token:{{token}}
      <br><br>secretKey:{{secretKey}}
      <br><br>source:{{source}} -->
      <el-form-item class="view-center">
        <!-- <el-button type="primary" @click="submitForm('ruleForm')" style="width: 48%;">确定</el-button> -->
        <el-button type="primary" @click="submitForm('ruleForm')" style="width: 48%;" :loading="loading">
          {{ loading ? '提交中 ...' : '提 交' }}
        </el-button>
        <el-button @click="close" style="width: 48%;">取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  import {
    validateCellphone,
    isEmpty
  } from '@/utils/validate'
  import {
    creditCard
  } from '@/api/temp.js'
  import {
    setLocalUser
  } from '@/utils/cookie.js'
  import {
    getUrlParam
  } from '@/utils/common'
  export default {
    data() {
      const validCellphone = (rule, value, callback) => {
        if (!validateCellphone(value)) {
          callback(new Error('请输入正确的手机号吗'))
        } else {
          callback()
        }
      }
      const validCard = (rule, value, callback) => {
        if (isEmpty(value) || value.length != 18) {
          callback(new Error('请输入18位身份证号码'))
        } else {
          callback()
        }
      }
      return {
        loading: false,

        ruleForm: {
          name: '',
          card: '',
          age: '',
          cellphone: ''
        },
        token: '',
        secretKey: '',
        source: '',
        rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          card: [{
            required: true,
            trigger: 'blur',
            validator: validCard
          }],
          age: [{
            required: true,
            message: '请输入年龄',
            trigger: 'blur'
          }],
          cellphone: [{
            required: true,
            trigger: 'blur',
            validator: validCellphone
          }]
        }
      };
    },
    mounted() {
      this.getUrlParamToken();
    },
    methods: {
      getUrlParamToken() {
        this.token = getUrlParam('token');
        this.secretKey = getUrlParam('secretKey');
        this.source = getUrlParam('source');
      },
      async creditCard() {
        this.loading = true;
        try {
          var temp = {
            name: this.ruleForm.name,
            card: this.ruleForm.card,
            age: this.ruleForm.age,
            cellphone: this.ruleForm.cellphone
          };
          var params = {
            content: JSON.stringify(temp),
            secretKey: this.secretKey,
            source: this.source,
            token: this.token
          }
          var res = await creditCard(params);
          this.$utils.showSuccessMessage(res.msg, this.close);
        } finally {
          this.loading = false;
        }
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) return false;
          this.creditCard();
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      close() {
        window.opener = null;
        window.open("about:blank", "_top").close();
        //调用微信内部的关闭页面方法
        WeixinJSBridge.call('closeWindow');
      },
    }
  }
</script>
<style scoped lang="scss">
  .temp-container {
    padding: 20px;
  }

  /deep/.view-center {
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    margin-top: 30%;
    margin-bottom: 0;
  }
</style>
